<template>
    <div style="width:100%;height:100%;overflow:hidden">
        <weui-input :list="input_2_list" title="" more_label="" agreement_name="" :tips="null"
                    @on-button="on_input_2_button">
        </weui-input>
        <div style="display:flex">
            <div style="flex:1;text-align:center" @click="dialog_0_is_show = true">
                {{shops.indexOf('taobao') != -1 ? '淘宝' : ''}}
                {{shops.indexOf('jd') != -1 ? '京东' : ''}}
                {{shops.length == 0 ? '请选择商城' : ''}}
            </div>
            <div style="flex:1;text-align:center" @click="dialog_1_is_show = true">
                {{billStatus}}
            </div>
        </div>
        <div class="scroll" style="width:100%;height:calc(100% - 70px);overflow:hidden">
            <div class="xs-container" :style="{height:isMobile?'':'100%'}">
                <div class="xs-content" :style="{height:isMobile?'':'100%'}">
                    <weui-panel title="" style="overflow-y:auto" :list="panel_0_list"
                                :style="{
            maxHeight : isMobile ? '' :
            is_last_page ? '100%': 'calc(100% - 25px)'
          }">
                    </weui-panel>
                    <div style="text-align:center" v-if="!isMobile && !is_last_page" @click="view_page++">
                        加载更多
                    </div>
                </div>
            </div>
        </div>
        <weui-dialog title="选择商城" :list="dialog_0_list" :is_show="dialog_0_is_show" @on-click="dialog_0_on_click">
            <weui-input title="" more_label="" agreement_name="" :tips="null" :list="input_0_list">
            </weui-input>
        </weui-dialog>
        <weui-dialog title="选择订单状态" :list="dialog_0_list" :is_show="dialog_1_is_show" @on-click="dialog_1_on_click">
            <weui-input title="" more_label="" agreement_name="" :tips="null" :list="input_1_list">
            </weui-input>
        </weui-dialog>
    </div>
</template>

<script>
    import WeuiPanel from '../vue2componentSet/src/components/WeuiPanel'
    import WeuiDialog from '../vue2componentSet/src/components/WeuiDialog'
    import WeuiInput from '../vue2componentSet/src/components/WeuiInput'
    import global from '../lib/global'
    import Xscroll from '../lib/xscroll/xscroll'
    import Pulldown from '../lib/xscroll/plugins/pulldown'
    import Pullup from '../lib/xscroll/plugins/pullup'
    import browserDetect from '../lib/browserDetect'
    import axios from 'axios'

    var xscroll
    var pulldown
    var pullup

    export default {
        components: {
            WeuiPanel,
            WeuiDialog,
            WeuiInput
        },
        data() {
            return {
                bills: [],
                isMobile: false,
                shops: ['taobao', 'jd'],
                dialog_0_is_show: false,
                dialog_0_list: ['取消', '确定'],
                input_0_list: [{
                    type: 'checkbox',
                    value: [],
                    list: [{
                        label: '淘宝',
                        value: 'taobao'
                    }, {
                        label: '京东',
                        value: 'jd'
                    }]
                }],
                dialog_1_is_show: false,
                billStatus: '全部订单',
                input_1_list: [{
                    type: 'radio',
                    value: '全部订单',
                    list: [{
                        label: '全部订单',
                        value: '全部订单'
                    }, {
                        label: '未完成订单',
                        value: '未完成订单'
                    }, {
                        label: '待返现订单',
                        value: '待返现订单'
                    }, {
                        label: '已返现订单',
                        value: '已返现订单'
                    }, {
                        label: '已失效订单',
                        value: '已失效订单'
                    }]
                }],
                page: 0,
                is_last_page: false,
                view_page: 1,
                input_2_list: [{
                    type: 'tel',
                    button: '添加',
                    placeholder: '输入淘宝/京东订单号添加返利订单'
                }]
            }
        },
        mounted() {
            this.$store.commit('set_title', '我的订单')

            if (!this.$store.state.customer) {
                this.$store.commit('login_dialog', {
                    is_show: true,
                    resolve: () => {
                        this.$router.push('/bill')
                    }
                })
                this.$router.goback()
                return
            }

            this.isMobile = browserDetect().mobile

            if (this.isMobile) {
                xscroll = new Xscroll({
                    renderTo: this.$el.querySelector('.scroll'),
                    bounce: true,
                    lockX: true,
                    lockY: false,
                    scrollbarX: false,
                    scrollbarY: false,
                    useOriginScroll: false,
                    useTransition: true,
                    preventDefault: false,
                    preventTouchMove: true,
                    boundryCheck: true,
                    gpuAcceleration: true,
                    stopPropagation: true,
                    isRealScrollingY: true
                });
                pulldown = new Pulldown({
                    autoRefresh: false,
                    downContent: '下拉刷新',
                    upContent: '松开刷新',
                    loadingContent: '刷新中'
                });
                pulldown.on('loading', (e) => {
                    this.view_page = 1
                    this.page = 0
                    this.bills = []
                    this.is_last_page = false
                })
                xscroll.plug(pulldown);
                pullup = new Pullup({
                    upContent: '上拉加载更多',
                    downContent: '松开加载更多',
                    loadingContent: '加载中'
                })
                pullup.on('loading', (e) => {
                    this.view_page++
                })
                xscroll.plug(pullup);
                xscroll.render();
            }

//      this.getBill().then(() => {
//        this.$nextTick(() => {
//          xscroll && xscroll.render()
//        })
//      })

            this.input_0_list[0].value.push('taobao')
            this.input_0_list[0].value.push('jd')
        },
        computed: {
            panel_0_list() {
                var list = []
                this.bills.forEach(item => {
                    if (this.shops.indexOf(item.shop) == -1) {
                        return
                    }
                    var desc = ''
                    if (item.payStatus == 13) {
                        if (['全部订单', '已失效订单'].indexOf(this.billStatus) == -1) {
                            return
                        }
                        desc = '创建时间: ' + item.createTime + '(已失效订单)'
                    } else if (item.payStatus != 3) {
                        if (['全部订单', '未完成订单'].indexOf(this.billStatus) == -1) {
                            return
                        }
                        desc = '创建时间: ' + item.createTime + '<br>预计返还: ￥' + item.feeString + '(未完成订单)'
                    } else if (!item.returnTime) {
                        if (['全部订单', '待返现订单'].indexOf(this.billStatus) == -1) {
                            return
                        }
                        desc = '完成时间: ' + item.earningTime + '<br>可返还: ￥' + item.feeString + '(待返现订单)'
                    } else {
                        if (['全部订单', '已返现订单'].indexOf(this.billStatus) == -1) {
                            return
                        }
                        desc = '返现时间: ' + item.returnTime + '<br>返还: ￥' + item.feeString + '(已返现订单)'
                    }
                    list.push({
                        title: item.auctionTitle,
                        desc: desc,
                        infos: ['数量: ' + item.auctionNum, '店名: ' + item.exShopTitle]
                    })
                })
                if (list.length < this.view_page * 10) {
                    this.page++
                    this.getBill().then(() => {
                        if (this.isMobile) {
                            this.$nextTick(() => {
                                xscroll && xscroll.render()
                                pulldown && pulldown.reset(() => {
                                    xscroll && xscroll.render()
                                })
                                pullup && pullup.complete()
                            })
                        }
                    })
                }
                return list
            }
        },
        methods: {
            getBill() {
                if (this.is_last_page) {
                    return new Promise(resolve => {
                        resolve()
                    })
                }
                return new Promise((resolve, reject) => {
                    axios.post(global.server + 'getBill.do', {
                        page: this.page
                    }).then(result => {
                        const obj = result.data
                        if (obj.result == 1) {
//              var _obj
//              for (var i = 0; i < obj.bills.length; i++) {
//                for (var j = i + 1; j < obj.bills.length; j++) {
//                  if (obj.bills[i].createTime < obj.bills[j].createTime) {
//                    _obj = obj.bills[i]
//                    obj.bills[i] = obj.bills[j]
//                    obj.bills[j] = _obj
//                  }
//                }
//              }
                            this.bills.push.apply(this.bills, obj.bills)
                            if (obj.bills.length < 10) {
                                this.is_last_page = true
                            }
                            resolve()
                        } else if (obj.result == 0) {
                            this.$store.commit('customer_login', null)
                            this.$router.goback()
                        }
                    })
                })
            },
            dialog_0_on_click(index) {
                if (index == 1) {
                    var shops = []
                    this.input_0_list[0].value.forEach(item => {
                        shops.push(item)
                    })
                    this.shops = shops
                }
                this.dialog_0_is_show = false
            },
            dialog_1_on_click(index) {
                if (index == 1) {
                    this.billStatus = this.input_1_list[0].value
                }
                this.dialog_1_is_show = false
            },
            on_input_2_button(index) {
                if (this.input_2_list[0].value) {
                    axios.post(global.server + 'claimBill.do', {
                        bill: this.input_2_list[0].value
                    }).then(result => {
                        const obj = result.data
                        if (obj.result == 1) {
                            this.view_page = 1
                            this.page = 0
                            this.bills = []
                            this.is_last_page = false
                        } else if (obj.result == 0) {
                            this.$store.commit('customer_login', null)
                            this.$router.goback()
                        } else {
                            this.$store.commit('toast', {
                                content: obj.msg,
                                type: 'warn'
                            })
                        }
                    })
                }
            }
        }
    }
</script>
